---
id: 61437d575fb98f57fa8f7f36
title: Крок 1
challengeType: 0
dashedName: step-1
---

# --description--

Розпочніть зі стандартного шаблонного коду HTML. Додайте оголошення `DOCTYPE`, елемент `html`, який зазначає, що ця сторінка англійською мовою, елемент `head` та елемент `body`.

Додайте теґ `<meta>` з відповідним `charset` та теґ `<meta>` для мобільного реагування в межах елемента `head`.

# --hints--

Ваш код повинен містити посилання `DOCTYPE`.

```js
assert(code.match(/<!DOCTYPE/gi));
```

Ви повинні додати пробіл після посилання `DOCTYPE`.

```js
assert(code.match(/<!DOCTYPE\s+/gi));
```

Ви повинні визначити тип документа як `html`.

```js
assert(code.match(/<!DOCTYPE\s+html/gi));
```

Ви повинні закрити декларацію `DOCTYPE` з допомогою `>` після типу.

```js
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
```

Ви повинні мати початковий теґ `<html>` та він повинен мати `lang` зі значенням `en`.

```js
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
```

Ваш елемент `html` повинен мати кінцевий теґ.

```js
assert(code.match(/<\/html\s*>/));
```

Ваша декларація `DOCTYPE` повинна бути на початку HTML.

```js
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
```

Ви повинні мати початковий теґ `<head>`.

```js
assert(code.match(/<head\s*>/i));
```

Ви повинні мати кінцевий теґ `</head>`.

```js
assert(code.match(/<\/head\s*>/i));
```

Ви повинні мати початковий теґ `<body>`.

```js
assert(code.match(/<body\s*>/i));
```

Ви повинні мати кінцевий теґ `</body>`.

```js
assert(code.match(/<\/body\s*>/i));
```

Елементи `head` та `body` повинні бути братськими.

```js
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
```

Елемент `head` повинен бути в межах елемента `html`.

```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
```

Елемент `body` повинен бути в межах елемента `html`.

```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
```

Ви повинні мати два елементи `meta`.

```js
const meta = document.querySelectorAll('meta');
assert(meta?.length === 2);
```

Один елемент `meta` повинен мати `name` зі значенням `viewport` та `content` зі значенням `width=device-width, initial-scale=1.0`.

```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
assert.exists(target);
```

Інший елемент `meta` повинен мати атрибут `charset` зі значенням `UTF-8`.

```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
assert.exists(target);
```

# --seed--

## --seed-contents--

```html
--fcc-editable-region--

--fcc-editable-region--
```

```css

```
